<template>
	<section>

		<el-row>

		  	<el-col :span="8" style="padding: 10px;">
		  		<!-- <div oncontextmenu="self.event.returnValue=false"> -->
		  			<div class="toolbar" >
		  				<span>菜单维护（可拖拽）</span>
						<span class="rightspan">
				          	<el-button type="text" size="mini" @click="expandTree()" circle>展开
				          	</el-button>
				          	<el-button type="text" size="mini" @click="foldTree()" circle>折叠
				          	</el-button>
				        </span>
		  			</div>
			       	<el-tree
			       		:span="24"
				      	:data="treeData"
				      	ref="treeX"
				      	node-key="id"
				      	default-expand-all
				      	highlight-current
				      	draggable
					  	@node-drop="handleDrop"
					  	@node-click="handleClickNode"
				      	:expand-on-click-node="false">
				      	<span class="custom-tree-node" slot-scope="{ node, data }">
				        	<span>{{ node.label }}</span>
					        <span class="rightspan">
					        	<el-tooltip v-if="node.level != 4" class="item" effect="dark" content="新增子节点" placement="top">
							      	<el-button v-if="node.level != 4" type="primary" size="mini" icon="el-icon-plus" @click="append(node, data)" circle>
					          		</el-button>
							    </el-tooltip>
					          	<el-tooltip class="item" effect="dark" content="修改" placement="top">
						          	<el-button size="mini" icon="el-icon-edit" @click="update(data)" circle>
						          	</el-button>
					          	</el-tooltip>
					          	<el-tooltip class="item" effect="dark" content="删除" placement="top">
						          	<el-button size="mini" icon="el-icon-delete" type="danger" @click="remove(node, data)" circle>
						          	</el-button>
					          	</el-tooltip>
					        </span>
				      	</span>
				    </el-tree>

			   <!--  </div> -->
		  	</el-col>
		  	
		  	<el-col :span="16" style="padding-left: 20px;">
		  		<!--工具条-->
				<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
					<el-form :inline="true" :model="filters">
						<el-form-item>
							<el-input v-model="filters.name" placeholder="菜单名称"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input v-model="filters.createUserName" placeholder="创建人"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input v-model="filters.showIndex" placeholder="序号"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" v-on:click="getList">查询</el-button>
						</el-form-item>
						<el-form-item>
							<el-button v-on:click="resetSearch">重置</el-button>
						</el-form-item>
					</el-form>
				</el-col>

				<el-col :span="24" style="padding-bottom: 10px;">
					<!-- <el-button type="primary" size="small" @click="handleAdd">新增</el-button> -->
					<el-button type="danger" size="small" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
				</el-col>

				<!--列表-->
				<el-table :data="tables" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column type="index" width="60"></el-table-column>
					<el-table-column prop="name" label="菜单名称" width="120" sortable></el-table-column>
					<el-table-column prop="filePath" label="菜单路径" width="160" sortable></el-table-column>
					<el-table-column prop="isShow" label="是否显示" width="130" sortable></el-table-column>
					<el-table-column prop="createTime" label="创建时间" width="130" sortable :formatter="renderTime"></el-table-column>
					<el-table-column prop="createUserName" label="创建人" min-width="100" ></el-table-column>
					<el-table-column prop="showIndex" label="序号" width="100" sortable></el-table-column>
					<el-table-column label="操作" width="150">
						<template scope="scope"> 
							<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<!--工具条-->
				<el-col :span="24" class="toolbar">
					
					<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
					</el-pagination>
				</el-col>
		  	</el-col>
		</el-row>
		
		

		<!--新增界面-->
		<el-dialog :title="formType" width="40%" :visible.sync="formVisible" :close-on-click-modal="false" >
		  		<el-form :model="formData" ref="form" :rules="validatoRule" label-width="120px" :inline="true" >
					<el-form-item label="菜单名称" prop="name">
						<el-input v-model="formData.name" auto-complete="off" />
					</el-form-item>
					<el-form-item label="父菜单" prop="parentName" :readonly="true" v-if="formType == '新增'?true: false"> 
						<el-input v-model="formData.parentName" auto-complete="off" />
					</el-form-item>
					<el-form-item label="菜单路径" prop="description">
						<el-input v-model="formData.filePath" ></el-input>
					</el-form-item>	
					<el-form-item label="菜单图标" prop="remark">
						<el-input v-model="formData.remark" >
							<el-button v-popover:popover slot="append" icon="el-icon-search"></el-button>
						</el-input>
					</el-form-item>	
					<el-form-item label="菜单序号" prop="showIndex">
						<el-input type="number" v-model="formData.showIndex" ></el-input>
					</el-form-item>
					<el-form-item label="是否显示" prop="isShow">
						<el-select v-model="formData.isShow" placeholder="请选择" >
						    <el-option
						      v-for="item in dict.yesorno"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
					</el-form-item>	
					
					
				</el-form>
				

			</el-row>
			<el-popover
			  	ref="popover"
			  	placement="bottom-end"
			  	width="300"
			  	v-model="popoverVisible"
			  	trigger="click">
			  	<el-row :gutter="20">
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-menu" @click="clickIcon('el-icon-menu')"></el-button></el-col>
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-more" @click="clickIcon('el-icon-more')"></el-button></el-col>
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-star-on" @click="clickIcon('el-icon-star-on')"></el-button></el-col>
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-star-off" @click="clickIcon('el-icon-star-off')"></el-button></el-col>
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-view" @click="clickIcon('el-icon-view')"></el-button></el-col>
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-time" @click="clickIcon('el-icon-time')"></el-button></el-col>
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-date" @click="clickIcon('el-icon-date')"></el-button></el-col>
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-time" @click="clickIcon('el-icon-time')"></el-button></el-col>
				</el-row>
			  	<el-row :gutter="20">	
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-date" @click="clickIcon('el-icon-date')"></el-button></el-col>
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-message" @click="clickIcon('el-icon-message')"></el-button></el-col>
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-document" @click="clickIcon('el-icon-document')"></el-button></el-col>
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-delete" @click="clickIcon('el-icon-delete')"></el-button></el-col>
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-search" @click="clickIcon('el-icon-search')"></el-button></el-col>
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-share" @click="clickIcon('el-icon-share')"></el-button></el-col>
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-setting" @click="clickIcon('el-icon-setting')"></el-button></el-col>
				  	<el-col :span="3"><el-button size="large" type="text" icon="el-icon-warning" @click="clickIcon('el-icon-warning')"></el-button></el-col>
				</el-row>
			  	
			</el-popover>
			<div slot="footer" class="dialog-footer">

				<el-button @click.native="formVisible = false">取消</el-button>
				<el-button type="primary" @click.native="submit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import util from '../../common/js/util';
	import { getSysMenuList, getSysMenuListByCondition, getSysMenuTree, addSysMenu, updateSysMenu, deleteSysMenu, getOneByKey } from '../../api/api';
	var dict = require('../../json/dict.json');

	export default {
        data() {
			return {
				filters: {
					name: ''
				},
				expandAll: true,
				treeNode: '1',
				dict: dict,
				tables: [],
				total: 0,
				page: 1,
				pageSize: 10,
				listLoading: false,
				sels: [],//列表选中列
				addLoading: false,
				formVisible: false,
				formData: {remark: ''},
				formType: '新增',//add或者update
				validatoRule: {},
				treeData:[],
				currentNodeId: '',
				currentNodeLabel: '',
				popoverVisible: false,
		        defaultProps: {
		          children: 'children',
		          label: 'label'
		        }
			}
        },
        methods: {
        	selsChange: function (sels) {
				this.sels = sels;
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getList();
			},
			getList: function(parentId){
				let para = {
					pageNo: this.page,
					pageSize: this.pageSize,
					parentId: parentId
				};
				para.name = this.filters.name;
				para.createUserName = this.filters.createUserName;
				para.showIndex = this.filters.showIndex;
				
				
				getSysMenuListByCondition(para, this.$router).then((res) => {
					this.total = res.totalCount;
					this.tables = res.list;
					this.listLoading = false;
				});
			},
			getTree: function(){
				let para = {
					parentId: this.treeNode
				};
				getSysMenuTree(para, this.$router).then((res) => {
					this.treeData = res.list;
					
				});
				let para1 = {
					parentId: 'ROOT'
				};
				getSysMenuTree(para1, this.$router).then((res) => {
					var treeData = res.list;
              		sessionStorage.setItem('menu', JSON.stringify(treeData));
				});
			},
			getOneByKey: function (id){
				getOneByKey(id, this.$router).then((res) => {
					this.formData = res.object;
				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.formType = '修改';
				this.formData = Object.assign({}, row);
				this.formVisible = true;
			},
			handleDel: function (index, row) {
				this.delete(row.id);
			},
			delete: function(id){
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = { id: id };
					deleteSysMenu(para, this.$router).then((res) => {
						this.listLoading = false;
						if(res.success){
							
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.getList('');
							this.getTree();
						}else{
							this.$alert(res.msg, '操作失败', {});
						}
					});
				}).catch(() => {

				});
			},
			//提交，新增或者编辑
			submit: function () {
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							this.formData.createTime = (!this.formData.createTime || this.formData.createTime == '') ? '' : util.formatDate.format(new Date(this.formData.createTime), 'yyyy-MM-dd');
							this.formData.updateTime = (!this.formData.updateTime || this.formData.updateTime == '') ? '' : util.formatDate.format(new Date(this.formData.updateTime), 'yyyy-MM-dd');
							let para = Object.assign({}, this.formData);

							if(this.formType == '新增'){
								para.parentId = this.currentNodeId;
								addSysMenu(para, this.$router).then((res) => {
									this.addLoading = false;
									//NProgress.done();
									if(res.success){
										this.$message({
											message: '提交成功',
											type: 'success'
										});
										this.formVisible = false;
										this.getList('');
										this.getTree();
									}else{
										this.$alert(res.msg, '操作失败', {});
									}
								});
							}else{
								updateSysMenu(para, this.$router).then((res) => {
									this.addLoading = false;
									if(res.success){
										this.$message({
											message: '提交成功',
											type: 'success'
										});
										this.formVisible = false;
										this.getList('');
										this.getTree();
									}else{
										this.$alert(res.msg, '操作失败', {});
									}
								});
							}
							
						});
					}
				});
			},
			batchRemove: function(){

			},
			append(node, data) {
				debugger;
		        this.formType = '新增';
		        this.currentNodeId = data.id;
		        this.currentNodeLabel = data.label;
		        this.formData.parentName = this.currentNodeLabel;
		        this.formData.isShow = '是'
		        this.formVisible = true;
	      	},
	      	update(data) {
				this.formType = '修改';
				this.formVisible = true;
				this.getOneByKey(data.id);
		        this.formData.parentName = this.currentNodeLabel;
	      	},
	      	remove(node, data) {
		        this.delete(data.id);
	      	},
	      	expandTree: function(){
	      		this.expandAll = true;
	      		for(var i=0;i<this.$refs.treeX.store._getAllNodes().length;i++){
		           this.$refs.treeX.store._getAllNodes()[i].expanded=this.expandAll;
		        }
	      	},
	      	foldTree: function(){
	      		this.expandAll = false;
	      		for(var i=0;i<this.$refs.treeX.store._getAllNodes().length;i++){
		           this.$refs.treeX.store._getAllNodes()[i].expanded=this.expandAll;
		        }
	      	},
	      	renderTime: function (row, column, cellValue, index){
	      		
	      		if(cellValue != null){
	      			return util.formatDate.format(new Date(cellValue), 'yyyy-MM-dd');
	      		}
	      	},
	      	resetSearch: function(){
	      		this.filters = {};
	      		this.getList('');
	      	},
	      	clickIcon:function (icon){
	      		this.popoverVisible = false;
	      		this.formData.remark = icon;
	      	},
	      	handleClickNode(data, node, e){
	      		this.getList(data.id);
	      	},
	      	//菜单拖拽完成事件
		    handleDrop(draggingNode, dropNode, dropType, ev) {
		        //before、after、inner
		        let tempPid = '';
		        let tempIndex = 0;
		        if (dropType == 'before'){
		        	tempPid = dropNode.data.pid;
		        	tempIndex = dropNode.data.showIndex + 1;
		        }else if (dropType == 'after'){
		        	tempPid = dropNode.data.pid;
		        	tempIndex = dropNode.data.showIndex - 1;
		        }else {
		        	//inner
		        	tempIndex = dropNode.data.showIndex;
		        	tempPid = dropNode.data.id;
		        }

		        //根节点只能有一个
		        if(dropNode.data.id == 'ROOT' && (dropType == 'before' || dropType == 'after')){
		        	this.getTree();
		        	return;
		        }
		        let para = {
		        	id: draggingNode.data.id,
		        	parentId: tempPid,
		        	showIndex: tempIndex
		        };
		        updateSysMenu(para, this.$router).then((res) => {
					this.addLoading = false;
					if(res.success){
						this.$message({
							message: '提交成功',
							type: 'success'
						});
						this.getList('');
						this.getTree();
					}else{
						this.$alert(res.msg, '操作失败', {});
					}
				});
		    }
		      
        },
        mounted(){
           	this.getList('');
           	this.getTree();
        },
        computed: {

        }
	      	
	      	
	      	
    }
</script>
<style >
.el-icon-caret-right:before {
	display: none;
}
.el-tree{

}
.el-tree-node__content{
	border: 0.1px solid #F2F2F2;
}
.rightspan{
	float:right; padding-right: 10px;
}
.el-dialog__header{
	background-color: #CCCCCC;
    padding-bottom: 10px;
}
.el-dialog__headerbtn .el-dialog__close{
	color: #FFFFFF;
}
</style>
